import React from "react";
import { useEffect } from "react";
import { useState } from "react";

export default function Slide({ items }) {
    const [key, setKey] = useState(0);

    useEffect(() => {
        const func = (event) => {
            switch (event.key) {
                case "ArrowDown":
                    if (items.length - 1 === key) {
                        return;
                    }
                    setKey(key + 1);
                    break;
                case "ArrowUp":
                    if (0 === key) {
                        return;
                    }
                    setKey(key - 1);
                    break;
            }
        };

        window.addEventListener("keydown", func);

        return () => removeEventListener("keydown", func);
    }, [key]);

    return (
        <div>
            {items[key] && (
                <div className="text-4xl mt-32 text-center">
                    {items[key].content}
                </div>
            )}
        </div>
    );
}
